<!--
 描述: 客户分布
 作者: Jack Chen
 日期: 2020-05-09
-->

<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2" ref="chart_right2"></div>
  </div>
</template>

<script>
export default {
  name: "distribution",
  data() {
    return {
      dataOption: [],
      color: []
    }
  },
  mounted() {

  },
  methods: {
    getEchart() {
      let myChart = this.$echarts.init(this.$refs.chart_right2);
      let option = {
        color: this.color,
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 5,
              type: 'solid'
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: '#0B4A6B',
            margin: 8,
            fontSize: 16
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B3E5E',
              width: 1,
              type: 'solid'
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: '#0B3E5E',
              width: 2,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                textStyle: {
                  color: '#b3ccf8',
                  fontSize: 13
                },
                position: 'outside'
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                  type: 'dotted'
                }
              },
              emphasis: {
                show: true
              }
            },
            data: this.dataOption
          }]
      }

      myChart.setOption(option, true);
      let outer = this
      myChart.on('mouseover', function(param) { //添加事件
        myChart.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
        let number = param.dataIndex //接住当前扇区的dataIndex
        // console.log(number)
        outer.$emit('change', number)
      });
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
